<template>
  <div class="catalog">
    <van-search v-model="value" @click="onFocus" placeholder="商品搜索, 共239款好物" />
    <van-popup
      v-model="$store.state.popShow"
      position="right"
      :style="{ height: '100vh',width:'90vw' }"
    >
      <sub-popup></sub-popup>
    </van-popup>
    <!-- 侧栏 -->
    <sideBar :categorylist="categoryList"></sideBar>
  </div>
</template>

<script>
import SubPopup from "@/components/SubPopup/SubPopup.vue";
import sideBar from "@/components/Catalog/SideBar.vue";
import { getHomeData } from "@/request/api";

export default {
  components: {
    SubPopup,
    sideBar
  },
  data() {
    return {
      value: "",
      categoryList:[]
    };
  },
  created() {
    getHomeData().then(res => {
      //判断是否被拦截
      if (res.errno == "0") {
        this.categoryList = res.data.categoryList;
      }
    });
  },
  methods: {
    onFocus() {
      this.$store.commit("changePopShow", true);
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.van-sidebar{
    width: 75px;
    position: absolute;
    top:54px;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f7f8fa;
    height: 100%;
    /deep/.van-sidebar-item{
        padding: 14px 12px;
    }
}
</style>